<script>
    export default {
      name: "App",
    }
</script>

<template>
  <div class="container">
    <div class="header">
      <router-view name="header"></router-view>
    </div>
    <div class="content">
      <div class="left">
        <router-view name="slider"></router-view>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>


<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  } 
  .content {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
  }
  .header {
    flex-basis: 80px;
  }
  .left {
    flex: 2;
  }
  .right {
    flex: 8;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>